
<template>
  <div class="flex flex-col">

    <a-row class="mb-[13px]">
      <a-col :span="24">
        <div class="bg-white">
          <div class="p-3" style="display: flex; justify-content: space-between;">
            <div class="text-[#444E84] text-[14px]">
              <a-space>
                <a-upload name="avatar" class="avatar-uploader" :show-upload-list="false" :customRequest="uploadImage">
                  <!-- 点击新增数据发现 -->
                  <a-button type="primary"> <a-icon type="upload" /> {{ $t('app.setting.themecolor.ff9999999999') }}
                  </a-button>
                </a-upload>
                <a-modal :centered="true" :visible="visible" @ok="handleOk">
                  <img src="../../img/编组1.png" alt="" class="img">
                  <p style="margin-left:200px ; font-size: 18px;">{{ $t('user.verification-code.required111566110577183')
                  }}</p>
                  <template #footer>
                    <!-- 返回 -->
                    <a-button id="button" key="submit" type="primary" :loading="loading" @click="handleOk">{{
                      $t('app.setting.themecolor.rr') }}</a-button>
                  </template>
                </a-modal>
              </a-space>
              <!-- 头部返回列表功能 -->
            </div>
            <div>
              <!-- 返回列表 -->
              <a-button class="border-none" icon="rollback" @click="rollback" style="right: 0;">{{
                $t('app.setting.themecolor.rr99') }}</a-button>
            </div>
          </div>
        </div>
      </a-col>

    </a-row>
    <a-row>
      <a-col :span="11">
        <div class="bg-white mr-[20px]">
          <div class="p-3 min-w-[300px]  ">
            <div class="text-[#444E84] text-[14px]">
              <a-space>
                <!-- 应用和数据库结构 -->
                <div class="tags"></div>{{ $t('app.setting.navigationmode') }}
              </a-space>
              <br /> <br />
              {{ $t('app.setting.content-width') }}
            </div>
            <div>
              <div class="flex items-center pl-4" v-for="(item, i) in treeData">
                <div class="bg-[#2459E5] w-[148px] h-[34px] leading-[34px] text-white my-[30px] text-center">
                  {{ item.title }}
                </div>
                <div class="flex flex-col bd-list">
                  <div class="flex items-center bd-item" v-for="(item1, i) in item.children">
                    <div class="relative">
                      <div class="open absolute top-[26px] left-[-5px] w-10 h-10 pt-3 pb-2"></div>
                      <div
                        class="bg-[#2459E5] bg-opacity-60  w-[148px] h-[34px] leading-[34px] text-white my-[30px] ml-[30px] text-center">
                        {{
                          item1.title }}
                      </div>
                    </div>
                    <div class="flex flex-col bd-list">
                      <div class="bd-item-1 relative" v-for="(item2, i) in item1.children">
                        <div class="open absolute top-[26px] left-[-5px] w-10 h-10 pt-3 pb-2"></div>
                        <div @click="detail(item2)"
                          class=" bg-[#2459E5] bg-opacity-20 cursor-pointer w-[148px] h-[34px] leading-[34px] text-[#2459E5] my-[30px] ml-[30px] text-center"
                          :class="{ 'select-item': selectId == item2.key }">
                          {{ item2.title }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-col>
      <a-col :span="13">
        <div class="bg-white">
          <div class="p-3">
            <div class="text-[#444E84] text-[14px]">
              <a-space>
                <div class="tags"></div>{{ $t('app.setting.fixedheader') }}
              </a-space>
              <br /> <br />
              {{ $t('app.setting.fixedsidebar') }}
            </div>
            <div class="mt-[20px]">
              <!-- 主列表 -->
              <a-table ref="table" size="middle" class="h-full overflow-x-auto" :dataSource="listData" :pagination="true"
                :loading="listLoading" :rowKey="record => record.Id">
                <a-table-column key="DiscoverMeterHeader" data-index="DiscoverMeterHeader" width="80px">
                  <span slot="title">{{ $t('app.setting.sidemenu') }}</span>
                </a-table-column>
                <a-table-column key="DiscoverRemark" data-index="DiscoverRemark" width="130px">
                  <span slot="title">{{ $t('app.setting.topmenu') }}</span>
                  <template slot-scope="text, record">
                    <a-input v-model="record.DiscoverRemark" :disabled="!record.edit" />
                  </template>
                </a-table-column>
                <a-table-column key="DiscoverLastUpdate" data-index="DiscoverLastUpdate" width="100px">
                  <span slot="title">{{ $t('app.setting.content-width.fixed') }}</span>
                </a-table-column>
                <a-table-column key="DiscoverState" data-index="DiscoverState" width="100px">
                  <span slot="title">{{ $t('app.setting.content-width.fluid') }}</span>
                  <template slot-scope="text, record">
                    <div v-if="record.DiscoverState == 1">{{ $t('user.verification-code.required111566110577329') }}
                    </div>
                    <div v-if="record.DiscoverState == 2">{{ $t('user.verification-code.required111566110577330') }}</div>
                    <div v-if="record.DiscoverState == 3" style="color:red;">{{ $t(
                      'user.verification-code.required111566110577331') }}</div>
                    <div v-if="record.DiscoverState == 4">{{ $t('user.verification-code.required111566110577332') }}</div>
                  </template>
                </a-table-column>
                <!-- <a-table-column key="DiscoverState" data-index="DiscoverState" width="150" >
            <span slot="title" >{{ $t('app.setting.content-width.fluid') }}</span>
          </a-table-column>  -->
                <a-table-column key="action" :title="$t('app.setting.othersettings')" width="100px">
                  <template slot-scope="text, record">
                    <span>
                      <!-- 编辑状态下有确认功能 -->
                      <a-button type="link" class="pl-[0px] pr-[10px]" v-if="record.edit && record.DiscoverState != 3"
                        @click="editPush(record)">{{
                          $t('app.setting.weakmode') }}</a-button>
                      <!-- 开启编辑 -->
                      <a-button type="link" class="pl-[0px] pr-[10px]" v-if="!record.edit && record.DiscoverState != 3"
                        @click="record.edit = true; bainji(record)">{{ $t('menu.exception.server-error') }}</a-button>
                      <!-- 详情 -->
                      <a-button type="link" class="pl-[0px] pr-[0px]" @click="del(record)">{{ $t('app.setting.copy')
                      }}</a-button>
                    </span>
                  </template>
                </a-table-column>
                <a-table-column key="logAction" :title="$t('app.setting.loading')">
                  <template slot-scope="text, record">

                    <!-- 查看日志 -->
                    <a-button type="link" class="ml-[0px] pr-[10px]" @click="logs(record)">{{ $t('app.setting.copyinfo')
                    }}</a-button>
                    <span slot="remarkAction" slot-scope="text, record">
                      <!-- 编辑状态 -->
                      <a-input v-model="record.DiscoverRemark" v-if="record.edit"
                        :placeholder="$t('user.verification-code.required1115661812233')"></a-input>
                      <!-- 读取状态 -->
                      <span v-else>{{ record.DiscoverRemark }}</span>
                    </span>
                  </template>
                </a-table-column>
              </a-table>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
    <logs ref="logsRef" @succeed="init" />
  </div>
</template>
  
<script>
import { dataDiscoveryLists, tableStructure, journalBookMark, journalDelete, detailLogs } from '@/api/find/form'
import axios from 'axios'
import Logs from './components/logs.vue'
import storage from "store";
import {ACCESS_TOKEN} from "@/store/mutation-types";
export default {
  components: {
    Logs
  },
  data() {
    return {
      listLoading: false,
      loading: false,
      visible: false,
      env: process.env.VUE_APP_BASE_API,
      treeData: [],
      fathertitle: '',
      appid: '',
      rowtitle: '',
      disabled1: false,
      selectId: 0,
      columns: [
        {
          title: '表头',
          width: "100px",
          dataIndex: 'DiscoverMeterHeader',
          align: 'center'
        }, {
          title: '备注(数据项)',
          width: "100px",
          dataIndex: 'DiscoverRemark',
          align: 'center',
          scopedSlots: { customRender: 'remarkAction' },
        }, {
          title: '最后更新日期',
          width: "190px",
          dataIndex: 'DiscoverLastUpdate',
          align: 'center'
        }, {
          title: '状态',
          width: "70px",
          dataIndex: 'DiscoverState',
          align: 'center',
          scopedSlots: { customRender: 'statusAction' },
        }, {
          title: '操作',
          dataIndex: '',
          scopedSlots: { customRender: 'action' },
          width: "120px",
          align: 'center'
        }, {
          title: '日志',
          width: "90px",
          dataIndex: 'logAction',
          scopedSlots: { customRender: 'logAction' },
          align: 'center'
        }
      ],
      listData: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      this.loading = true
      try {
        const { data: sourceData } = await dataDiscoveryLists({ DiscoverAppId: this.$route.query.id })
        this.treeData = sourceData.treeData
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },
    rollback() {
      this.$router.push({path:'/find'})
    },
    async uploadImage(e) {
      this.uploadLoading = true
      let formdata = new FormData()
      formdata.append('file', e.file)
      formdata.append('license', "LyogUEZHPk+V3+sRO+jt485oOja6aJg9ybPBR0MYsoFs9LN0QU5yVFoJLhs8pViQ")
      try {
        const { status, data } = await axios({
          url: `${this.env}/v1/discover/create`,
          method: 'post',
          data: formdata,
          headers: {
            token: storage.get(ACCESS_TOKEN),
            tokens:storage.get("bmwToken") || "",
          },
        })
        if (status == 200 && data.code == 1) {
          if (data.data != "") {

            this.$message.success(this.$t('user.verification-code.required111566110577333'))
            this.toFinds(data.data)
            // 获取数据列表
            const { data: data1 } = await tableStructure({
              DiscoverAppId: this.appid,
              DiscoverTableName: this.rowtitle,
              DiscoverDbName: this.fathertitle
            })
            // 预处理数据
            var tempLists = []
            for (var i = 0; i < data1.length; i++) {
              // 待审核并且没有内容
              if (data1[i].DiscoverRemark == "" && data1[i].DiscoverState == 1) {
                data1[i].edit = true
              } else if (data1[i].DiscoverRemark == "" && data1[i].DiscoverState == 3) {
                data1[i].edit = true
              } else {
                data1[i].edit = false
              }
              tempLists.push(data1[i])
            }
            this.listData = tempLists
          } else {
            this.showModal()
          }
        } else {
          this.$message.error(this.$t('user.verification-code.required111566110577282'))
        }
        this.init()
      } catch (error) {
        console.log(error)
        this.$message.error(error)
      } finally {
        this.uploadLoading = false
      }
    },
    toFinds(id) {
      this.$router.push({ path: '/find/detail', query: { id } })
    },
    handleOk(e) {
      this.visible = false;
    },
    async del(record) {
      // 删除数据
      try {
        await journalDelete({ id: record.Id })
        this.$message.success(this.$t('user.verification-code.required111566110577133'))
        this.listData.splice(this.listData.indexOf(record), 1)
      } catch (error) {
        console.log(error)
        this.$message.error(error)
      }
    },
    async logs(record) {
      // 查看日志详情
      try {
        const { data } = await detailLogs({ id: record.Id, remark: record.DiscoverRemark })
        this.$refs.logsRef.read(data)
      } catch (error) {
        console.log(error)
        this.$message.error(error)
      }
    },
    async editPush(record) {
      // 编辑确认
      try {
        await journalBookMark({ id: record.Id, remark: record.DiscoverRemark, DiscoverState: record.DiscoverState = 2 })

        // 获取数据列表
        const { data } = await tableStructure({
          DiscoverAppId: this.appid,
          DiscoverTableName: this.rowtitle,
          DiscoverDbName: this.fathertitle
        })
        // 预处理数据
        var tempLists = []
        for (var i = 0; i < data.length; i++) {
          // 待审核并且没有内容
          if (data[i].DiscoverRemark == "" && data[i].DiscoverState == 1) {
            data[i].edit = true
          } else if (data[i].DiscoverRemark == "" && data[i].DiscoverState == 3) {
            data[i].edit = true
          } else {
            data[i].edit = false
          }
          tempLists.push(data[i])
        }
        this.listData = tempLists
        this.$message.success(this.$t('user.verification-code.required111566110577334'))
        record.edit = false
      } catch (error) {
        console.log(error)
        this.$message.error(error)
        this.disabled1 = true
      }

    },
    async bainji(record) {
      const { data } = await journalBookMark({ id: record.Id, remark: record.DiscoverRemark, DiscoverState: record.DiscoverState = 1 })
      // this.$message.success("确认成功")
      record.edit = true
      this.disabled1 = false
    },
    //点击左侧，右边处出来详细，数据给右边的表格
    async detail(row) {
      console.log('row', row);
      this.rowtitle = row.title;
      var appid = this.$route.query.id;
      this.appid = appid;
      console.log('appid', parseInt(this.parseInt));
      // 用于存储递归结果（扁平数据）
      let res = []

      // 递归函数
      let fn = (source) => {
        source.forEach(el => {
          res.push(el)
          el.children && el.children.length > 0 ? fn(el.children) : ""  // 子级递归
        });
      };
      fn(this.treeData);

      var father = undefined;

      // 遍历获取父级
      for (var i = 0; i < res.length; i++) {
        if (res[i].children != null) {
          for (var t = 0; t < res[i].children.length; t++) {
            if (res[i].children[t] == row) {
              father = res[i]
            }
          }
        }
      }
      console.log('fasert', father);
      this.fathertitle = father.title
      // 获取数据列表
      const { data } = await tableStructure({
        DiscoverAppId: appid,
        DiscoverTableName: row.title,
        DiscoverDbName: father.title
      })
      console.log('data--3333', data);

      // 预处理数据
      var tempLists = []
      for (var i = 0; i < data.length; i++) {
        // 待审核并且没有内容
        if (data[i].DiscoverRemark == "" && data[i].DiscoverState == 1) {
          data[i].edit = true
        } else if (data[i].DiscoverRemark == "" && data[i].DiscoverState == 3) {
          data[i].edit = true
        } else {
          data[i].edit = false
        }
        tempLists.push(data[i])
      }


      this.listData = tempLists

      this.selectId = row.key
    }
  },
}
</script>

<style lang="css">
/*新增/编辑 数据等级*/
.tags-text {
  left: 312px;
  top: 284px;
  width: 110px;
  height: 22px;
  opacity: 1;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.05px;
  line-height: 21.95px;
  color: rgba(34, 44, 100, 1);
  text-align: left;
  vertical-align: top;
}


.tags {
  left: 298px;
  top: 288px;
  width: 6px;
  height: 14px;
  opacity: 1;
  border-radius: 2px;
  background: rgba(0, 80, 247, 1);
}

/*形状 19998*/
.process-img {
  left: 949px;
  top: 0;
  width: 80px;
  height: 549px;
  opacity: 1;
  background: url(https://img.js.design/assets/img/647e007af3316a25d487b9c2.png);
}
</style>

<style lang="less" scoped> // 关闭样式

 :deep(.ant-tree-switcher_close) {
   background: url(~@/assets/icons/close.svg) no-repeat center !important;

   i {
     display: none;
   }
 }

 //打开样式
 .open {
   background: url(~@/assets/icons/open.svg) no-repeat center;
 }

 .bd-list {

   .bd-item:first-child,
   .bd-item-1:first-child {
     position: relative;

     &::before {
       position: absolute;
       left: 15px;
       top: 50%;
       content: ' ';
       background: #2459E5;
       height: 50%;
       width: 1px;
     }
   }

   .bd-item :not(:first-child):not(:last-child),
   .bd-item-1 :not(:first-child):not(:last-child) {
     position: relative;

     &::before {
       position: absolute;
       left: 15px;
       top: 0;
       content: ' ';
       background: #2459E5;
       height: 100%;
       width: 1px;
     }
   }

   .bd-item:last-child,
   .bd-item-1:last-child {
     position: relative;

     &::before {
       position: absolute;
       left: 15px;
       bottom: 50%;
       content: ' ';
       background: #2459E5;
       height: 50%;
       width: 1px;
     }
   }

   .bd-item:only-child,
   .bd-item-1:only-child {
     position: relative;

     &::before {
       display: none !important;
     }
   }
 }

 .select-item {

   border-radius: 2px;
   background: rgba(0, 0, 0, 0.2);
   color: #fff;
 }</style>